<template>
	<div class="w-783px h-558px">
		<div class="relative w-100%">
			<div id="map-chart" class="relative" v-show="!cityProps.isShow"></div>

			<div class="relative w-100%" v-if="cityProps.isShow">
				<ChildMap :cityProps="cityProps" @click="hiddenMunicipalMap" @hiddenMunicipalMap="hiddenMunicipalMap" />
			</div>
		</div>

	</div>
</template>
<script setup lang="ts">
import RenderMap from './components/map_children/RenderMap'
import ChildMap from './components/map_children/ChildMap.vue'
import json from './components/json/qinghai.json'
import { onBeforeMount, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
let map: any

const cityProps = reactive({
	cityIndex: 0,
	isShow: false,
})
const hiddenMunicipalMap = () => {
	// if (userInfo.value.cityName == '青海省') {
	// 	// console.log('关了')

	// 	getPartyOrganizeCount(userInfo.value.cityName)
	// 	getWebMeetingCountList(userInfo.value.cityName)
	// }
	   cityProps.isShow = false
	cityProps.cityIndex = 0
}
const showMunicipalMap = (index: any) => {
	if (index >= 0) {
		cityProps.isShow = true
		cityProps.cityIndex = index
	}
	const payload = {
		cityState: cityProps.cityIndex,
		countyArea: '',
		province: '100',
	}
}
onMounted(() => {
	if (!map) {
		map = new RenderMap(
			document.getElementById('map-chart'),
			json,
			(index: any, name: string) => {
				console.log('name', name)
				showMunicipalMap(index)
				// getPartyOrganizeCount(name)
				// getWebMeetingCountList(name)
			},
			(index: any) => {
				console.log(index)
				// getWebHighDw(index)
			},
		)
	}
	map.setOption({
		svgPath: '../qinghai.svg',
	})
})
</script>
<style>
@media (min-width: 1024px) {
	.about {
		min-height: 100vh;
		display: flex;
		align-items: center;
	}
}
</style>
